A Bar charts with a reflection effect

This demo uses two canvas tags - one for the chart and one for the reflection. If the the chart used the textAccessible option the text would not be reflected - so it doesn't.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs1" width="600" height="250">[No canvas support]</canvas>

<canvas id="cvs2" width="600" height="250">[No canvas support]</canvas>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        function Draw(id)
        {
            var bar = new RGraph.Bar({
                id: id,
                data: [[45,60],[65,30],[40,80],[62,48]],
                options: {
                    labels: ['Luis', 'Kevin', 'John', 'Gregory'],
                    ymax: 100,
                    strokestyle: 'white',
                    linewidth: 2,
                    shadowOffsetx: 0,
                    shadowOffsety: 0,
                    shadowBlur: 10,
                    hmarginGrouped: 2,
                    unitsPre: '$',
                    gutterLeft: 50,
                    gutterRight: 15,
                    colors: ['Gradient(white:rgba(255, 176, 176, 0.5))','Gradient(white:rgba(153, 208, 249,0.5))'],
                    backgroundGridAutofitNumhlines: 5,
                    backgroundGridAutofitNumvlines: 4,
                    textAccessible: false
                }
            }).draw()
            
            return bar;
        }
        
        Draw('cvs1');
        
        /**
        * Draw the reflection (after inverting the canvas)
        */
        var co = document.getElementById("cvs2").getContext('2d');
        co.setTransform(1,0,0,-1,0,250);
        
        Draw('cvs2');
        
        /**
        * Reset the transformation
        */
        co.setTransform(1,0,0,1,0,0);

        /**
        * Now draw a graduated white rect over the reflection
        */
        var grad = co.createLinearGradient(0,0,0,250)
        grad.addColorStop(0, 'rgba(255,255,255,0.5)');
        grad.addColorStop(0.75, 'rgba(255,255,255,1)');

        co.fillStyle = grad;
        co.fillRect(0,0,600,250)
    };
</script>